<template>
  <d-drawer
    size="760px"
    class="leader-add-drawer"
    :api="api"
    :header="formData.isEdit ? '编辑嘉宾' : '新增嘉宾'"
    v-model:visible="visible"
    v-model:data="formData"
    :rules="rules"
    :handleParams="handleParams"
  >
    <t-form-item label-width="150px" label="嘉宾类型" name="guestType">
      <t-radio-group v-model="formData.guestType">
        <t-radio value="Speaker">Speaker</t-radio>
        <t-radio value="组委会">组委会</t-radio>
        <t-radio value="VIP">VIP</t-radio>
        <t-radio value="媒体">媒体</t-radio>
        <t-radio value="嘉宾">嘉宾</t-radio>
        <t-radio value="智享嘉宾">智享嘉宾</t-radio>
        <t-radio value="工作人员（百度）">工作人员（百度）</t-radio>
        <t-radio value="工作人员（我们创造）">工作人员（我们创造）</t-radio>
        <t-radio value="工作人员（赞助商）">工作人员（赞助商）</t-radio>
      </t-radio-group>
    </t-form-item>
    <t-form-item label-width="150px" label="姓名" name="name">
      <t-input
        class="input-title"
        clearable
        :maxlength="30"
        v-model="formData.name"
        placeholder="请输入姓名"
      ></t-input>
    </t-form-item>
    <t-form-item label-width="150px" label="电话" name="phoneNumber">
      <t-input
        class="input-title"
        clearable
        :maxlength="11"
        v-model="formData.phoneNumber"
        placeholder="请输入电话"
      ></t-input>
    </t-form-item>
    <t-form-item class="mt-30px" label-width="150px" label="身份证号" name="idNumber">
      <t-input
        class="input-title"
        clearable
        :maxlength="18"
        v-model="formData.idNumber"
        placeholder="请输入身份证号"
      ></t-input>
    </t-form-item>
    <t-form-item label-width="150px" label="座位号" name="seatNumber">
      <t-input
        class="input-title"
        clearable
        :maxlength="30"
        v-model="formData.seatNumber"
        placeholder="请输入座位号"
      ></t-input>
    </t-form-item>
  </d-drawer>
</template>

<script setup>
import { ref, computed } from 'vue'
import { get } from '@common'
const api = 'basic/guest'
const INIT_STATUS = {
  id: '',
  idNumber: '',
  name: '',
  phoneNumber: '',
  guestType: '普通嘉宾',
  seatNumber: ''
}
const visible = ref(false)
const formData = ref({ ...INIT_STATUS })
const rules = computed(() => {
  return {
    idNumber: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    seatNumber: [{ required: true, message: '请输入座位', trigger: 'blur' }],
    phoneNumber: [{ required: true, message: '请输入电话号码', trigger: 'blur' }]
  }
})

const show = async (info = {}) => {
  if (info?.id) {
    const res = await get(`${api}/${info.id}`)
    let dataObj = {
      ...res.data,
      isEdit: true
    }
    formData.value = dataObj
  } else {
    formData.value = { ...INIT_STATUS }
  }
  visible.value = true
}
const handleParams = (params) => {
  return {
    ...params
  }
}

defineExpose({ show })
</script>
<style lang="less">
.leader-add-drawer {
  .input-title {
    width: 400px;
  }

  .input-row-title {
    width: 120px;
    margin-right: 5px;
  }

  .remark-title {
    color: #999;
    font-size: 12px;

    &.require {
      margin: 20px 0 0 150px;
    }
  }

  .radio-title {
    width: 100px;
    display: inline-block;
  }
  .hideInput {
    .t-input__inner {
      opacity: 0;
    }
  }
}
</style>
